<template>
  <div class="explore">
    <!-- <slot></slot> -->
    <!-- 大题题干 -->
    <div v-html="JSON.parse(body.source_body).html"></div>
    <div v-if="body.question_type == $parent.N_305">
      <div
        title="单击播放"
        class="sound-element-wrapper"
        style=" cursor: pointer;"
        clickMusic="true"
      >
        <audio
          controls
          preload="preload"
          muted="muted"
          loop="loop"
          :src="body.file_path"
          :id="'audio' + body.file_name"
        ></audio>
      </div>
    </div>
    <!-- 小题题干 -->
    <div>
      <div
        v-for="(item, index) in body.subQuestionList"
        :key="index"
        class="subQuestionList"
      >
        <div class="subQuestionList_index">{{ Number(index + 1) }}</div>
        <!-- 单选多选 -->
        <div class="subQuestionList_content">
          <single
            v-if="item.question_type === N_298 || item.question_type === N_299"
            :body="item"
            :sub="true"
            :_indexChild="index"
          ></single>
          <!-- 填空 -->
          <fill
            v-if="item.question_type == N_301"
            :sub="true"
            :_indexChild="index"
            :body="item"
          ></fill>
          <!-- 判断 -->
          <judge v-if="item.question_type == N_300" :body="item"></judge>
          <!-- 简答-->
          <answer v-if="item.question_type === N_302" :body="item"></answer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import F from '@/utils/f'
import single from './single'
import fill from './fill'
import judge from './judge'
import answer from './answer'
export default {
  props: {
    body: {
      default: function () {
        return {}
      }
    }
  },
  components: {
    single,
    fill,
    judge,
    answer
  },
  data () {
    return {
      N_298: F.N_298,
      N_299: F.N_299,
      N_300: F.N_300,
      N_301: F.N_301,
      N_302: F.N_302
    }
  },
  created () {
    // console.log(JSON.stringify(this.body.subQuestionList))
  }
}
</script>

<style lang="scss">
.explore {
  .subQuestionList {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    .subQuestionList_index {
      margin-right: 20px;
    }
    .subQuestionList_content {
      margin-bottom: 20px;
    }
  }
}
</style>
